<script setup>
import { ref,onMounted } from 'vue'
import { queryOutboundOrder,addOutboundOrder,queryOutboundOrderById,deleteOutboundOrder,updateOutboundOrder } from '../../api/outboundorder'
import { getAllUser } from '../../api/user'
import { queryItemList } from '../../api/item'
import { queryAllWarehouseAreaLocal } from '../../api/warehousearealocal'
import { ElMessage } from 'element-plus'


//定义弹出框数据
const title = ref(null)
const dialogShow = ref(false)
const dialogData = ref({customerId:'',detailsList:[]})

//定义库位集合
const warehouseAreaLocalList = ref([])
//查询所有库位
const getwarehouseAreaLocalList = async ()=>{ 
  const result = await queryAllWarehouseAreaLocal()
  warehouseAreaLocalList.value = result.data
}

//定义userlist集合
const userList = ref([])
const getUserList = async () => { 
  const res = await getAllUser()
  userList.value = res.data
}
//清空子表表单数据
const clearSelectable = () => { 
  selectForm.value = { skuName: '',spuCode: '' }
  querySelectable()
}
// 删除明细项
const deleteItem = (index) => {
  dialogData.value.detailsList.splice(index, 1)
}

//定义子对话框的数据
const selectDialogShow = ref(false)
const selectForm = ref({ skuName: '',spuCode: '' })
const selectableList = ref([])
//查询子表数据
const querySelectable = async () => { 
  const result = await queryItemList(pageSelect.value,pageSizeSelect.value,selectForm.value.skuName,selectForm.value.spuCode)
  selectableList.value = result.data.list
  totalSelect.value = result.data.totalSelect
}

//定义表格数据
const outBoundOrderList = ref([])
//分页条件查询
const query = async () =>{
  const result = await queryOutboundOrder(page.value,pageSize.value,outBoundOrderFrom.value.status,outBoundOrderFrom.value.invoiceCode,outBoundOrderFrom.value.customerName)
  outBoundOrderList.value = result.data.rows
  total.value = result.data.total
}
//定义表单数据
const outBoundOrderFrom = ref({ status: '', invoiceCode: '', customerName: ''})
//定义清空表单的方法
const clear = () => { 
  outBoundOrderFrom.value = { status: '', invoiceCode: '', customerName: ''}
  query()
}

//定义分页的变量
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
//定义分页的点击事件
const handleSizeChange = (val) => {
  page.value = 1
  query()
}
const handleCurrentChange = (val) => {
  query()
}

//定义子表分页数据
const pageSelect = ref(1)
const pageSizeSelect = ref(10)
const totalSelect = ref(0)
const handleSizeSelectChange = (val) => {
  pageSelect.value = 1
  querySelectable()
}
const handleCurrentSelectChange = (val) => {
  querySelectable()
}
//定义商品集合
const selectedItems  = ref([])
//获取选中商品的id集合
const handleSelectionChange = (value) => {
  selectedItems.value = value
}
//子表中添加商品的数据
const addSelectedItems = () => { 
  selectedItems.value.forEach(item => { 
      dialogData.value.detailsList.push({
        id: item.id,
        spuCode: item.spuCode,
        skuName: item.skuName,
        count: '',
  })
  })
  // 关闭选择对话框
  selectDialogShow.value = false
  // 清空选中项
  selectedItems.value = []
  clearSelectable()
}

//挂载
onMounted(() => {
  query()
  getUserList()
  querySelectable()
  getwarehouseAreaLocalList()
})

//添加的点击事件
const outBoundOrderData = () => { 
  title.value = '添加发货单'
  dialogShow.value = true
  //清空数据
  dialogData.value = {customerId:'',detailsList:[]}
  clearSelectable()
}

//保存的点击事件
const saveOutBoundOrderInfo = async () => { 
  const result = await addOutboundOrder(dialogData.value)
  if(result.code){
    ElMessage.success('操作成功！')
    dialogShow.value = false
    query()
  }else{
    ElMessage.error('操作失败！请重新操作')
  }
}

//回显数据
const check = async (id)=>{
  Itemtitle.value = '查看商品明细'
  dialogItemShow.value = true
  const result = await queryOutboundOrderById(id) 
  dialogItemData.value = result.data
}

//定义回显框的数据
const Itemtitle = ref(null)
const dialogItemShow = ref(false)
const dialogItemData = ref({id:'',customerId:'',detailsList:[]})


// 删除
const deleteById = async (id)=>{
  const result = await deleteOutboundOrder(id) 
  if(result.code){
    ElMessage.success('操作成功！')
    query()
  }else{
    ElMessage.error('操作失败！请重新操作')
  }
}

//确定发货单的点击事件
const confirm = async (id) => { 
  ordertitle.value = '确认发货单'
  dialogOrderShow.value = true
  const result = await queryOutboundOrderById(id) 
  dialogOrderData.value = result.data
}

//定义确认发货单的对话框数据
const ordertitle = ref(null)
const dialogOrderShow = ref(false)
const dialogOrderData = ref({id:'',customerId:'',warehousingAreaLocalId:'',detailsList:[]})

//确定发货提交的点击事件
const confirmOrderInfo = async () => { 
  const result = await updateOutboundOrder(dialogOrderData.value)
  if(result.code){
    ElMessage.success('操作成功！')
    dialogOrderShow.value = false
    query()
  }else{
    ElMessage.error('操作失败！请重新操作')
  }
}
</script>
<template>
<div><h3>发货单</h3></div>
<div>
  <el-form :inline="true" :model="outBoundOrderFrom" class="demo-form-inline">
    <el-form-item>
      <el-button type="primary" @click="outBoundOrderData" plain><el-icon><Plus /></el-icon></el-button>
    </el-form-item>
    <el-form-item>
      <el-select v-model="outBoundOrderFrom.status" placeholder="请选择状态" style="width: 200px;">
        <el-option label="预发货" value="1"></el-option>
        <el-option label="确认发货" value="2"></el-option>
        <el-option label="拣货中" value="3"></el-option>
        <el-option label="拣货完成" value="4"></el-option>
        <el-option label="待打包" value="5"></el-option>
        <el-option label="待称重" value="6"></el-option>
        <el-option label="待发货" value="7"></el-option>
        <el-option label="已发货" value="8"></el-option>
        <el-option label="已签收" value="9"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-input v-model="outBoundOrderFrom.invoiceCode" placeholder="发货单号" style="width: 200px;"/>
    </el-form-item>
    <el-form-item>
      <el-input v-model="outBoundOrderFrom.customerName" placeholder="客户名称" style="width: 200px;"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="query" plain>查询</el-button>
      <el-button type="default" @click="clear" plain>清空</el-button>
    </el-form-item>
  </el-form>
</div>


<!-- table表格 -->
<div>
  <el-table :data="outBoundOrderList" border style="width: 100%" >
    <el-table-column fixed type="index" label="序号" align="center"  width="80"/>
    <el-table-column prop="invoiceCode" label="发货单号" align="center"  width="200"></el-table-column>
    <el-table-column prop="status" label="发货单状态" align="center" width="120">
      <template #default="scope">
        <el-tag v-if="scope.row.status == 1" type="info">预发货</el-tag>
        <el-tag v-else-if="scope.row.status == 2" type="primary">确认发货</el-tag>
        <el-tag v-else-if="scope.row.status == 3" type="warning">拣货中</el-tag>
        <el-tag v-else-if="scope.row.status == 4" type="success">拣货完成</el-tag>
        <el-tag v-else-if="scope.row.status == 5" type="warning">待打包</el-tag>
        <el-tag v-else-if="scope.row.status == 6" type="warning">待称重</el-tag>
        <el-tag v-else-if="scope.row.status == 7" type="warning">待发货</el-tag>
        <el-tag v-else-if="scope.row.status == 8" type="success">已发货</el-tag>
        <el-tag v-else="scope.row.status == 9" type="success">已签收</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="customerName" label="客户名称" align="center" width="200"/>
    <el-table-column prop="totalCount" label="总数量" align="center" width="150"/>
    <el-table-column prop="totalWeight" label="总重量" align="center" width="150"/>
    <el-table-column prop="totalVolume" label="总体积" align="center" width="150"/>
    <el-table-column prop="empName" label="操作员工" align="center" width="150"/>
    <el-table-column prop="createBy" label="创建人" align="center" width="150"/>
    <el-table-column prop="createTime" label="创建时间" align="center" width="200"/>
    <el-table-column fixed="right" label="操作" align="center" width="180">
      <template #default="scope">
        <el-button type="success" size="small" @click="check(scope.row.id)" plain><el-icon><View /></el-icon></el-button>
        <el-button type="primary" size="small" @click="confirm(scope.row.id)" plain><el-icon><Select /></el-icon></el-button>
        <el-button type="danger" size="small" @click="deleteById(scope.row.id)" plain><el-icon><Delete /></el-icon></el-button>
      </template>
    </el-table-column>
  </el-table>
</div>

<!-- 分页 -->
<div>
  <el-pagination
  v-model:current-page="page"
  v-model:page-size="pageSize"
  :page-sizes="[5, 10, 15, 20]"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"/>
</div>

<!-- 弹出框 -->
<div>
  <el-dialog v-model="dialogShow" :title="title" width="60%" align-center>
    <el-form :model="dialogData">
      <el-form-item label="客户名称">
        <el-select v-model="dialogData.customerId" placeholder="请选择客户" style="width: 300px;">
          <el-option v-for="item in userList" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="selectDialogShow = true"><el-icon><Plus /></el-icon></el-button>
      </el-form-item>
      <el-row :gutter="10" v-for="(item,index) in dialogData.detailsList">
      <el-col :span="7">
        <el-form-item :label-width="formLabelWidth">
          <el-input v-model="item.skuName" placeholder="商品名称"/>
        </el-form-item>
      </el-col>
      <el-col :span="7">
        <el-form-item :label-width="formLabelWidth">
          <el-input v-model="item.spuCode" placeholder="商品编码"/>
        </el-form-item>
      </el-col>
      <el-col :span="7">
        <el-form-item :label-width="formLabelWidth">
          <el-input v-model="item.count" placeholder="商品数量"/>
        </el-form-item>
      </el-col>
      <el-col :span="3"><el-button type="danger" @click="deleteItem(index)" plain>删除</el-button></el-col>
    </el-row>
    </el-form>
    <template #footer>
      <el-button @click="dialogShow = false" type="default" plain>取消</el-button>
      <el-button type="primary" @click="saveOutBoundOrderInfo" plain>确定</el-button>
    </template>
  </el-dialog>
</div>

<!-- 选择商品的弹窗 -->
<el-dialog v-model="selectDialogShow" title="选择商品" width="70%" align-center>
  <el-form :inline="true" @submit.prevent>
    <el-form-item>
      <el-input v-model="selectForm.skuName" placeholder="商品名称" style="width: 200px;" />
    </el-form-item>
    <el-form-item>
      <el-input v-model="selectForm.spuCode" placeholder="商品编码" style="width: 200px;" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="querySelectable" plain>查询</el-button>
      <el-button type="default" @click="clearSelectable" plain>清空</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="selectableList" @selection-change="handleSelectionChange" style="margin-top: 10px;" border height="300" >
    <el-table-column type="selection" width="55" />
    <el-table-column fixed type="index" label="序号" align="center" />
    <el-table-column prop="spuCode" label="商品编号" align="center" />
    <el-table-column prop="skuName" label="商品名称" align="center" />
    <el-table-column prop="skuPrice" label="商品价格" align="center" />
    <el-table-column prop="supplierName" label="供应商名称" align="center" />
    <el-table-column prop="brandName" label="品牌" align="center" />
  </el-table>

    <!-- 分页 -->
  <div>
    <el-pagination
    v-model:current-page="pageSelect"
    v-model:page-size="pageSizeSelect"
    :page-sizes="[5, 10, 15, 20]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="totalSelect"
    @size-change="handleSizeSelectChange"
    @current-change="handleCurrentSelectChange"/>
  </div>
  <template #footer>
    <el-button @click="selectDialogShow = false">取消</el-button>
    <el-button type="primary" @click="addSelectedItems" plain>添加</el-button>
  </template>
</el-dialog>

<!-- 回显数据弹出框 -->
<div>
  <el-dialog v-model="dialogItemShow" :title="Itemtitle" width="50%" align-center>
    <el-form :model="dialogItemData">
      <el-form-item label="客户名称">
        <el-select v-model="dialogItemData.customerId" placeholder="请选择客户" style="width: 300px;">
          <el-option v-for="item in userList" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-row :gutter="10" v-for="(item,index) in dialogItemData.detailsList">
      <el-col :span="8">
        <el-form-item :label-width="formLabelWidth">
          <el-input v-model="item.skuName" placeholder="商品名称"/>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item :label-width="formLabelWidth">
          <el-input v-model="item.spuCode" placeholder="商品编码"/>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item :label-width="formLabelWidth">
          <el-input v-model="item.count" placeholder="商品数量"/>
        </el-form-item>
      </el-col>
    </el-row>
    </el-form>
    <template #footer>
      <el-button @click="dialogItemShow = false" type="default" plain>取消</el-button>
    </template>
  </el-dialog>
</div>

<!-- 确认发货单 -->
<div>
  <el-dialog v-model="dialogOrderShow" :title="ordertitle" width="50%" align-center>
    <el-form :model="dialogOrderData">
      <el-row :gutter="10"> 
        <el-col :span="12">
          <el-form-item label="客户名称">
            <el-select v-model="dialogOrderData.customerId" placeholder="请选择客户" style="width: 300px;">
              <el-option v-for="item in userList" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="选择库位">
            <el-select v-model="dialogOrderData.warehousingAreaLocalId" placeholder="请选择库位" style="width: 300px;">
              <el-option v-for="item in warehouseAreaLocalList" :label="item.localCode" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10" v-for="(item,index) in dialogOrderData.detailsList">
      <el-col :span="8">
        <el-form-item :label-width="formLabelWidth">
          <el-input v-model="item.skuName" placeholder="商品名称"/>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item :label-width="formLabelWidth">
          <el-input v-model="item.spuCode" placeholder="商品编码"/>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item :label-width="formLabelWidth">
          <el-input v-model="item.count" placeholder="商品数量"/>
        </el-form-item>
      </el-col>
    </el-row>
    </el-form>
    <template #footer>
      <el-button @click="dialogOrderShow = false" type="default" plain>取消</el-button>
      <el-button type="primary" @click="confirmOrderInfo" plain>确定</el-button>
    </template>
  </el-dialog>
</div>
</template>
<style scoped>
</style>